﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="a.aspx.cs" Inherits="Learn._003SinglePageApp.a" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Scripts/jquery-1.8.2.min.js"></script>
    <script src="../Scripts/sammy.js"></script>
    <script src="../Scripts/knockout-3.3.0.js"></script>
    <style>
        .folders {
            display: inline-block;
        }

        .selected {
            color: red;
        }
    </style>
</head>
<body>
    <!-- Todo: Create UI -->
    <ul data-bind="foreach: folders">
        <li class="folders" data-bind="text: $data, css: {
    selected: $data == $root.chosenFolderId()
}, click: $root.goToFolder"></li>
    </ul>
    <%--  --%>
    <table class="mails" data-bind="with: chosenFolderData">
        <thead>
            <tr>
                <th>From</th>
                <th>To</th>
                <th>Subject</th>
                <th>Date</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: mails">
            <tr data-bind="click: $root.goToMail">
                <td data-bind="text: from"></td>
                <td data-bind="text: to"></td>
                <td data-bind="text: subject"></td>
                <td data-bind="text: date"></td>
            </tr>
        </tbody>

    </table>
    <div>------------------------------分割线------------------------------</div>
    <div class="ViewMail" data-bind="with: chosenMailData">
        <div class="mailInfo">
            <h1 data-bind="text: subject"></h1>
            <p>
                <label>Id</label>:<span data-bind="text: id"></span>
            </p>
            <p>
                <label>From</label>:<span data-bind="text: from"></span>
            </p>
            <p>
                <label>To</label>:<span data-bind="text: to"></span>
            </p>
            <p>
                <label>Date</label>:<span data-bind="text: date"></span>
            </p>
        </div>
        <p class="message" data-bind="html: messageCountent"></p>
    </div>
    <script>
        function WebmailViewModel() {
            // Data
            var self = this;
            self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
            self.chosenFolderId = ko.observable();
            self.chosenFolderData = ko.observable();
            self.chosenMailData = ko.observable();

            //Behaviours
            self.goToFolder = function (folder) {
                //self.chosenFolderId(folder);
                //self.chosenFolderData(null); //stop showing a mail.
                //$.get('a.aspx?cmd=getMails', { folder: folder },
                //    function (r) {
                //        var x = JSON.parse(r);
                //        self.chosenFolderData(x);
                //});
                location.hash = folder;
            };
            self.goToMail = function (mail) {
                //self.chosenFolderId(mail.folder);
                //self.chosenFolderData(null);//Stop showing a folder.
                //$.get('a.aspx?cmd=getMail', { mailId: mail.id },
                //    function (r) {
                //        var x = JSON.parse(r);
                //        self.chosenMailData(x);
                //    }
                //);
                location.hash = mail.folder + '/' + mail.id
            }
            //Clinent-side routes
            Sammy(function () {
                this.get("#:folder", function () {
                    self.chosenFolderId(this.params.folder);
                    self.chosenMailData(null);
                    $.get('a.aspx?cmd=getMails', { folder: this.params.folder },
                        function (r) {
                            var x = JSON.parse(r);
                            self.chosenFolderData(x);
                        });
                });
                this.get('#:folder/:mailId', function () {
                    self.chosenFolderId(this.params.folder);
                    self.chosenMailData(null);
                    $.get('a.aspx?cmd=getMail', { mailId: this.params.mailId },
                        function (r) {
                            var x = JSON.parse(r);
                            self.chosenMailData(x);
                        }
                    );
                });//... leave  the existing two routes unchangd...
                this.get('', function () {
                    this.app.runRoute('get', "#Inbox");
                });
            }).run();
            // Remove the following two lines now:
            //Show inbox by default.
            //self.goToFolder('Inbox');
        };

        ko.applyBindings(new WebmailViewModel());
    </script>
</body>
</html>
